<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <title>南太湖电力科技驾驶舱</title>
    <link rel="shortcut icon" href="img/logo.png" type="image/x-icon" />
    <link rel="stylesheet" href="css/style.css" />
    <link rel="stylesheet" href="css/style_th.css" />
    <link rel="stylesheet" href="css/style_th2.css" />
    <!-- <script src="js/vue.min.js"></script> -->
    <!-- 后期优化 
    1.把  所有本地js文件改成cdn外连 速度会快点 再把js里面这几个包删除 减少包的体积
    2.后续视频流速度加快的话 把所有基地址的https地址 改成端口
    
  -->
    <!-- <script src="js/jquery.min.js"></script> -->
    <!-- <script src="js/echarts.min.js"></script> -->
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.4/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.min.js"></script>
    <!-- moment.js -->
    <script src="https://cdn.jsdelivr.net/npm/moment@2.29.4/min/moment.min.js"></script>

    <!-- axios -->
    <script src="https://cdn.jsdelivr.net/npm/axios@1.6.7/dist/axios.min.js"></script>
    <!-- <script src="js/moment.js"></script> -->
    <!--接口-->
    <!-- <script src="js/axios.min.js"></script> -->
    <script src="js/request.js"></script>
    <script src="js/api.js"></script>
    <!-- 引入样式 -->
    <link
      rel="stylesheet"
      href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"
    />
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="https://unpkg.com/hls.js@1.4.3/dist/hls.min.js"></script>

    <style type="text/css">
      * {
        padding: 0;
        margin: 0;
      }

      html,
      body {
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 1);
      }

      [v-cloak] {
        display: none !important;
      }

      #outerSizeAPosition {
        width: 100%;
        height: 67.5rem;
        /*background-image: url(img/main-bg.png);*/
        /*background-repeat: no-repeat;*/
        /*background-position: center center;*/
        /*background-size: cover;*/
        background-color: rgba(0, 0, 0, 1);
        overflow-x: hidden;
        overflow-y: auto;
        -moz-user-select: none;
        -webkit-user-select: none;
        user-select: none;
        position: relative;
        display: flex;
      }
      .scale-container {
        position: fixed;
        left: 50%;
        top: 0;
        width: 1920px; /* 设计稿宽度 */
        height: 1080px; /* 设计稿高度 */
        transform: translateX(-50%);
      }
    </style>
  </head>

  <body>
    <div class="scale-container">
      <div id="outerSizeAPosition">
        <div class="title">
          <div class="titleFont">南太湖电力科技驾驶舱</div>
        </div>
        <div class="date">
          <div v-cloak>{{ datetime }}</div>
          <!-- <div>晴</div> -->
          <!-- <div>温度23℃</div> -->
        </div>

        <div class="middle">
          <div class="middleImg">
            <img loading="lazy" src="img/微信图片_20250603102431.png" alt="" />
          </div>
        </div>
        <div class="loginLoginOut" @click="loginOut">
          <img src="img/loginoutPic.png" alt="" />
        </div>
        <!-- 渗滤液坑道间 -->
        <div class="leftBox1">
          <div class="boxTitle">
            <div class="boxTitleText">
              <img src="img/icon.png" alt="" />
              <span>柴油库</span>
            </div>
            <div class="boxTitleBottom"></div>
          </div>
          <div class="sub">
            <div class="subTitle">{{this.dianwei1.name}}</div>
            <div
              class="boxSub"
              :class="{'boxSubNull':this.dianwei1Obj.chaiyou1.level===-1, 'boxSubWarn1':this.dianwei1Obj.chaiyou1.level===1, 'boxSubWarn2':this.dianwei1Obj.chaiyou1.level===2}"
              @click="showHistory('dianwei1')"
            >
              <div class="subList">
                <div class="subListTop">柴油</div>
                <div
                  class="subListBottom"
                  v-show="numVisible"
                  id="oneLiuhuaqing"
                >
                  {{this.dianwei1Obj.chaiyou1.realData?.value}}{{this.dianwei1Obj.chaiyou1.realUnit}}
                </div>
              </div>
            </div>
          </div>

          <div class="sub">
            <div class="subTitle">{{this.dianwei2.name }}</div>
            <div
              class="boxSub"
              :class="{'boxSubNull':this.dianwei2Obj.chaiyou2.level===-1, 'boxSubWarn1':this.dianwei2Obj.chaiyou2.level===1, 'boxSubWarn2':this.dianwei2Obj.chaiyou2.level===2}"
              @click="showHistory('dianwei2')"
            >
              <div class="subList">
                <div class="subListTop">柴油</div>
                <div
                  class="subListBottom"
                  v-show="numVisible"
                  id="twoLiuhuaqing"
                >
                  {{this.dianwei2Obj.chaiyou2.realData?.value}}{{this.dianwei2Obj.chaiyou2.realUnit}}
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 红外热成像监测 -->
        <div class="leftBox2">
          <div class="boxTitle">
            <div class="boxTitleText">
              <img src="img/icon.png" alt="" />
              <span>红外热成像监测</span>
            </div>
            <div class="boxTitleBottom5"></div>
          </div>
          <div class="videoClass">
            <div class="seeAll" @click="showVideo">
              全部<span style="color: #fff">></span>
            </div>

            <div class="carouselBox">
              <el-carousel
                ref="videoCarousel"
                :autoplay="true"
                interval="120000"
                arrow="always"
                trigger="click"
                height="280px"
                @change="handleCarouselChange"
              >
                <el-carousel-item
                  :name="item.cameraIndexCode"
                  v-for="item in videoList"
                  :key="item"
                >
                  <div class="carouselBoxItem">
                    <video
                      :id="`video-${item.cameraIndexCode}`"
                      playsinline
                      controls
                      muted
                    ></video>
                  </div>
                </el-carousel-item>
              </el-carousel>
              <div class="leftBottomVideoList">
                <div v-for="(item,index) in videoList" :key="item">
                  <div
                    class="videoItem1"
                    :class="outActiveItem === item.cameraIndexCode ? 'outActiveItem' : ''"
                    @click="seeOutItem(item, index)"
                  >
                    {{index+1}}.{{item.cameraName}}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 右侧 -->
        <div class="rightBox">
          <div class="boxTitle">
            <div class="boxTitleText">
              <img src="img/icon.png" alt="" />
              <span>氨水罐</span>
            </div>
            <div class="boxTitleBottom"></div>
          </div>
          <div class="sub">
            <div class="subTitle" style="top: 13.125rem; left: 0.625rem">
              {{this.dianwei3.name}}
            </div>
            <div
              class="boxSub"
              :class="{'boxSubNull':this.dianwei3Obj.aqg.level===-1, 'boxSubWarn1':this.dianwei3Obj.aqg.level===1, 'boxSubWarn2':this.dianwei3Obj.aqg.level===2}"
              @click="showHistory('dianwei3')"
            >
              <div class="subList">
                <div class="subListTop">氨水</div>
                <div
                  class="subListBottom"
                  v-show="numVisible"
                  id="twoLiuhuaqing"
                >
                  {{this.dianwei3Obj.aqg.realData?.value}}{{this.dianwei3Obj.aqg.realUnit}}
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="rightBox rightBox2">
          <div class="boxTitle">
            <div class="boxTitleText">
              <img src="img/icon.png" alt="" />
              <span>新生物质固废车间</span>
            </div>
            <div class="boxTitleBottom"></div>
          </div>
          <div class="sub">
            <div class="subTitle" style="top: 13.125rem; left: 0.625rem">
              {{this.dianwei4.name}}
            </div>
            <div
              class="boxSub"
              :class="{'boxSubNull':this.dianwei4Obj.xgfcj.level===-1, 'boxSubWarn1':this.dianwei4Obj.xgfcj.level===1, 'boxSubWarn2':this.dianwei4Obj.xgfcj.level===2}"
              @click="showHistory('dianwei4')"
            >
              <div class="subList">
                <div class="subListTop">烟尘</div>
                <div
                  class="subListBottom"
                  v-show="numVisible"
                  id="twoLiuhuaqing"
                >
                  {{this.dianwei4Obj.xgfcj.realData?.value}}{{this.dianwei4Obj.xgfcj.realUnit}}
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="rightBox1">
          <div class="boxTitle">
            <div class="boxTitleText">
              <img src="img/icon.png" alt="" />
              <span>报警阈值</span>
            </div>
            <div class="boxTitleBottom4"></div>
          </div>
          <div class="rightBox-sub">
            <div class="topTitle">
              <div class="leftTitle">监测类型</div>
              <div class="middleTitle">低报</div>
              <div class="rightTitle">高报</div>
            </div>
            <div class="topTitle boxItem">
              <div class="leftTitle">氨水</div>
              <div class="middleTitle">20ppm</div>
              <div class="rightTitle">40ppm</div>
            </div>
            <div class="topTitle boxItem">
              <div class="leftTitle">烟尘</div>
              <div class="middleTitle">500mg/m³</div>
              <div class="rightTitle">1000mg/m³</div>
            </div>
            <div class="topTitle boxItem">
              <div class="leftTitle">柴油</div>
              <div class="middleTitle">25%LEL</div>
              <div class="rightTitle">50%LEL</div>
            </div>
            <div class="topTitle boxItem">
              <div class="leftTitle">温度</div>
              <div class="middleTitle">65℃</div>
              <div class="rightTitle">80℃</div>
            </div>
          </div>
        </div>

        <div class="bottomBox1">
          <div class="boxTitle">
            <div class="boxTitleText">
              <img src="img/icon1.png" alt="" />
              <span>报警数据</span>
            </div>
            <div class="boxTitleBottom1"></div>
          </div>
          <div class="bottomBoxSub">
            <div
              class="warnBox"
              :class="{'warnBox1':warnAll===2,'warnBox2':warnAll===1 }"
              @click="changeWarnLiCancel()"
            >
              <div class="warnBoxText" v-if="warnAll===0">暂无报警</div>
              <div
                class="warnBoxText"
                v-if="warnAll===2"
                style="color: #ff9999"
              >
                二级报警
              </div>
              <div
                class="warnBoxText"
                v-if="warnAll===1"
                style="color: #ffcc99"
              >
                一级报警
              </div>
            </div>
            <div class="warnList">
              <div
                class="zero"
                style="line-height: 9.375rem"
                v-if="warnList.length===0"
              >
                暂无报警信息
              </div>
              <ul>
                <li
                  v-cloak
                  v-for="(item, index) in warnList"
                  :key="index"
                  :class="{'active':item.isClick===true, 'warn':item.level===1, 'warn2':item.level===2}"
                  @click="changeWarnLi(item, index)"
                >
                  <div
                    style="width: 25%"
                    v-if="item.sceneTypeName||item.scenePointName"
                  >
                    {{ item.sceneTypeName }}{{ item.scenePointName }}
                  </div>
                  <div
                    style="width: 25%"
                    v-if="!item.sceneTypeName&&!item.scenePointName"
                  >
                    暂无绑定
                  </div>
                  <div style="width: 25%" v-if="item.typePid===1">
                    {{ item.hj212Name }}{{ item.number }}{{item.unit}}
                  </div>
                  <div style="width: 25%" v-if="item.typePid===2">
                    {{ item.typeName }}
                  </div>
                  <div>{{item.createTime.substring(5, 16)}}</div>
                  <div
                    style="width: 15%"
                    v-if="item.status===1||item.status===2||item.status===7"
                  >
                    未确认
                  </div>
                  <div
                    style="width: 15%"
                    v-if="item.status===3||item.status===4"
                  >
                    已确认
                  </div>
                  <div style="width: 15%">
                    <div
                      class="warnType"
                      v-if="item.typePid===1"
                      :class="{'warnType1':item.level===1, 'warnType2':item.level===2}"
                    >
                      数据报警
                    </div>
                    <div
                      class="warnType"
                      v-if="item.typePid===2"
                      :class="{'warnType1':item.level===1, 'warnType2':item.level===2}"
                    >
                      行为报警
                    </div>
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </div>

        <div class="bottom"></div>

        <!--报警弹框 start-->
        <div class="mask" id="mask" v-show="maskVisible"></div>
        <audio
          src="img/warn.mp3"
          autoplay
          loop
          id="audio"
          v-if="maskVisible"
        ></audio>
        <div class="maskPop" v-show="maskVisible">
          <div class="maskText">
            <!-- <div v-for="(item, index) in warnAllList">{{item.detail}}</div> -->
            <div v-for="(item, index) in noticeList">{{item.details}}</div>
          </div>
          <div class="maskButton" @click="maskConfirm()">我知道了</div>
          <!-- <div class="maskButton">我知道了</div> -->
        </div>

        <!--报警弹框 end-->
        <div class="historyBox" v-show="historyVisible">
          <div class="close" @click="closeBox">
            <img src="img/close.png" alt="" />
          </div>
          <div class="historyBoxTitle">{{historyLineTitle}}</div>
          <div class="selectBox_th">
            <el-date-picker
              v-if="active===2"
              v-model="value1"
              type="datetimerange"
              value-format="yyyy-MM-dd HH:mm:ss"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              @change="chooseDate"
            >
            </el-date-picker>
            <div
              :class="{nowBtn_active:active===1}"
              class="nowBtn"
              href="javascript:;"
              @click="changeButton(1)"
            >
              实时数据
            </div>

            <div
              :class="{nowBtn_active:active===2}"
              href="javascript:;"
              @click="changeButton(2)"
              class="nowBtn"
            >
              历史数据
            </div>
          </div>
          <div id="historyLine" class="historyLine" v-show="lineVisible"></div>
          <div v-show="!lineVisible" class="loading">
            <img src="img/loading.png" alt="" />
          </div>
        </div>
        <!-- <div class="weekNewspaper" @click="openNewsPaperDialog">周 报</div> -->
        <div class="newspaperDialog" v-show="newspaperVisible">
          <img
            class="closeX"
            src="img/关闭.png"
            alt=""
            @click="closeNewspaper"
          />
          <div class="newspaperTitle">本周周报</div>
          <div class="firstLine">
            <div class="firstContent">
              <div class="left">一级报警次数：</div>
              <div class="right">
                <div class="value">{{weekobj.levelOneCount}}</div>
                <div class="unit">次</div>
              </div>
            </div>
            <div class="secondContent">
              <div class="left">时长：</div>
              <div class="right">
                <div class="value">
                  {{(weekobj.levelOneTime/60).toFixed(2)||'-'}}h
                </div>
              </div>
            </div>
            <div class="firstContent">
              <div class="left">二级报警次数：</div>
              <div class="right">
                <div class="value yellow">{{weekobj.levelTwoCount}}</div>
                <div class="unit">次</div>
              </div>
            </div>
            <div class="secondContent">
              <div class="left">时长：</div>
              <div class="right">
                <div class="value">
                  {{(weekobj.levelTwoTime/60).toFixed(2)||'-'}}h
                </div>
              </div>
            </div>
          </div>
          <div class="secondLine">
            <div class="firstContent">
              <div class="left">一级警报主要出现时间段：</div>
              <div class="right">
                <div class="value">{{weekobj.levelOneTimeRange}}</div>
              </div>
            </div>
            <div class="firstContent">
              <div class="left">二级警报主要出现时间段：</div>
              <div class="right">
                <div class="value">{{weekobj.levelTwoTimeRange}}</div>
              </div>
            </div>
          </div>
          <div class="firstLine">
            <div class="secondContent">
              <div class="left">报警时长占比：</div>
              <div class="right">
                <div class="value blue">{{weekobj.ratio}}</div>
              </div>
            </div>
          </div>
          <div class="thirdLine">
            <div class="name">结论：</div>
            <div class="nameContent">{{weekobj.conclusion}}</div>
          </div>
          <div class="thirdLine">
            <div class="name">提醒：</div>
            <div class="nameContent">{{weekobj.alert}}</div>
          </div>
        </div>

        <div class="problemDialog" v-if="videoDialog">
          <div class="dialogTitle">
            <div>红外热成像监测</div>
            <img src="./img//关闭.png" alt="" @click="closeHiddenTrouble" />
          </div>
          <div class="videoBoxDialog">
            <div class="leftBox22">
              <video id="videoElement3" controls muted></video>
            </div>
            <div class="rightBox22">
              <div
                class="videoList"
                v-for="(item, index) in videoList"
                :key="index.cameraIndexCode"
              >
                <div
                  :class="activeItem === item.cameraIndexCode ? 'activeItem' : ''"
                  class="videoItem"
                  @click="seeItem(item, index)"
                >
                  {{ item.cameraName }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <script type="text/javascript">
      // import flvjs from 'flv.js' // 引入flv.js
      let outer = new Vue({
        el: '#outerSizeAPosition',
        components: {
          // moment
        },
        data: {
          skipType: null,
          cmsUserId: 223,
          departmentIds: 209,
          newspaperVisible: false,
          weekobj: {},
          // cmsUserId: 203,
          // departmentIds: 191,
          datetime: '',
          iCount: '',
          selectButton: 0,
          warnList: [
            // { sceneTypeName: '初沉池2号点位', typePid: 2, typeName: '安环人员 孙建国', level: 0, createTime: '2023-06-03 10:50', status: 1, type: '行为报警'},
          ],
          warnListTime: 1500, // 表格滚动时长
          warnListTimer: '', // 表格滚动定时器
          recordList: [
            // { father:{sceneTypeName: '初沉池2号点位',type: 0}, operatorPositionName: '安环人员', operatorName: '孙建国', status: 10, createTime: '2023-06-03 11:47'},
          ],
          recordListTime: 1500, // 表格滚动时长
          recordListTimer: '', // 表格滚动定时器
          suppliesList: [
            // { name: '安全帽', count: '10', unit: '个'},
          ],
          suppliesVisible: false,
          // 报警动态相关
          maskVisible: false,
          numVisible: true,
          warnBox: [0, 0, 0, 0, 0, 0],
          warnAll: 0,
          warnAllList: [],
          noticeList: [],
          // 历史弹窗
          historyVisible: false,
          lineVisible: false,
          historyLineTitle: '',
          historyLineData: '',
          historyLineName: [],
          historyLineMonth: [],
          active: 1,
          value1: [new Date(), new Date()],
          dialogTitleName: '',
          allData1: [],
          allData2: [],
          allData3: [],
          dianwei1: {},
          dianwei1Obj: {
            chaiyou1: {},
          },
          dianwei2: {},
          dianwei2Obj: {
            chaiyou2: {},
          },
          dianwei3: {},
          dianwei3Obj: {
            aqg: {},
          },
          dianwei4: {},
          dianwei4Obj: {
            xgfcj: {},
          },
          dialogData: {},
          videoList: [],
          activeItem: 0,
          videoTotal: null,
          pageParams: {
            pageNum: 1,
            pageSize: 9,
          },
          videoDialog: false,
          hlsInstance: null, // 统一管理HLS实例
          outActiveItem: 0,
          outHlsInstance: null, // 统一管理外面HLS实例
          // commonHttp: 'http://lindro.cn',
          commonHttp: 'http://60.188.49.14',
          
        },
        mounted() {
          this.getUrlParams()
          // 获取实时传感器数据列表-按场景
          this.getSensorDataReal()
          // 获取报警列表
          this.getWarnList()

          // 获取告知消息报警
          this.getWarnNoticeList()
          // 循环 一分钟更新
          var that = this
          this.iCount = setInterval(function () {
            console.log('数据更新')
            // 获取实时传感器数据列表-按场景
            that.getSensorDataReal()
            // 获取告知消息报警
            that.getWarnNoticeList()
            // 获取报警列表
            that.getWarnList()
          }, 1000 * 30)
          // 获取时间
          this.nowTimes()
          // 报警列表滚动取消20230609
          // this.warnListScroll()
          this.recordListScroll()
          this.maskShake()
          // 每隔一段时间整个页面刷新 12小时
          setInterval('location.reload();', 1000 * 43200)

          const res = localStorage.getItem('naiTaiHuDianLKJ_token')

          if (res == undefined || res == '' || res == null) {
            window.location.href = './views/login.html'
          }

          this.getVideoList()

          // 页面加载后初始化
          window.addEventListener('load', this.initScale())
        },
        methods: {
          initScale() {
            const container = document.querySelector('.scale-container')
            const designWidth = 1920 // 设计稿宽度
            const designHeight = 1080 // 设计稿高度
            // 添加CSS过渡效果
            container.style.transition = 'transform 0.3s ease-in-out'
            function adjustScale() {
              const windowWidth = window.innerWidth
              const windowHeight = window.innerHeight

              // 计算最佳缩放比例（保持宽高比）
              const scale = Math.min(
                windowWidth / designWidth,
                windowHeight / designHeight
              )

              // 应用缩放并居中（仅水平居中）
              container.style.transform = `scale(${scale}) translateX(-50%)`

              // 可选：添加背景填充
              document.body.style.backgroundColor = '#000'
            }

            // 防抖函数
            function debounce(fn, delay) {
              let timer = null
              return function () {
                clearTimeout(timer)
                timer = setTimeout(() => fn.apply(this, arguments), delay)
              }
            }

            // 初始化设置
            container.style.width = `${designWidth}px`
            container.style.height = `${designHeight}px`
            container.style.left = '50%'
            container.style.transformOrigin = '0 0'

            // 初始调整
            adjustScale()

            // 响应视口变化
            window.addEventListener('resize', debounce(adjustScale, 100))

            // // 禁用浏览器缩放
            // document.addEventListener(
            //   'wheel',
            //   function (e) {
            //     if (e.ctrlKey) e.preventDefault()
            //   },
            //   { passive: false }
            // )
          },

          loginOut() {
            localStorage.clear()
            window.location.href = './views/login.html'
          },
          chooseLocation(e) {
            this.nowLocation = e
            this.getSensorDataReal()
          },
          openNewsPaperDialog() {
            this.getWeekData()
            this.newspaperVisible = true
          },
          closeNewspaper() {
            this.newspaperVisible = false
          },
          getWeekData() {
            axios
              .post('https://60.188.49.14/api/alarm/getAlarmWeeklyReport', {
                departmentId: this.departmentIds,
              })
              .then((response) => {
                this.weekobj = response.data.data
              })
              .catch((error) => {
                console.error('Error:', error)
              })
          },
          formatDate(date) {
            const year = date.getFullYear()
            const month = String(date.getMonth() + 1).padStart(2, '0') // 月份从 0 开始
            const day = String(date.getDate()).padStart(2, '0')
            const hours = String(date.getHours()).padStart(2, '0')
            const minutes = String(date.getMinutes()).padStart(2, '0')
            const seconds = String(date.getSeconds()).padStart(2, '0')

            return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
          },
          getUrlParams() {
            const queryString = window.location.search
            const urlParams = new URLSearchParams(queryString)
            const param1 = urlParams.get('skipType')

            // 如果需要，可以将参数值保存到组件的数据中
            this.skipType = param1
          },

          showTipsGreen(content, height, time) {
            //窗口的宽度
            // let windowWidth  = $(window).width()
            let tipsDiv = '<div class="tipsClass">' + content + '</div>'
            // console.log(tipsDiv)
            $('body').append(tipsDiv)
            $('div.tipsClass')
              .css({
                top: height + 'px',
                // 'left'       : ( windowWidth / 2 ) - 350/2 + 'px',
                right: '3.125rem',
                position: 'absolute',
                'z-index': '9999',
                padding: '.1875rem .3125rem',
                background:
                  'linear-gradient(0deg, rgba(8, 151, 189, 1.0) 0%, rgba(10, 27, 69, 1.0) 100%)',
                'font-size': '1.125rem',
                'font-weight': 'bold',
                margin: '0 auto',
                'text-align': 'center',
                width: '21.875rem',
                height: 'auto',
                color: '#fff',
                opacity: '1',
              })
              .show()
            // console.log(tipsDiv)
            setTimeout(function () {
              $('div.tipsClass').fadeOut()
            }, time * 1000)
          },
          // 获取实时传感器数据列表-按场景
          async getSensorDataReal() {
            this.warnAllList = [] // 清空报警列表
            const res = await sensorDataReal({ cmsUserId: this.cmsUserId })
            this.allData1 = []
            this.allData2 = []
            this.allData3 = []

            this.allData1 = res.data.filter((item) => item.name === '柴油库1')
            this.allData2 = res.data.filter((item) => item.name === '氨水罐')
            this.allData3 = res.data.filter(
              (item) => item.name === '新生物质固废车间'
            )

            this.dianwei1 = JSON.parse(
              JSON.stringify(
                this.allData1[0].listDataScenePoint.find(
                  (item) => item.name == '3#柴油库'
                )
              )
            )

            this.dianwei1Obj.chaiyou1 = this.dianwei1.listHj212[0]

            this.dianwei2 = JSON.parse(
              JSON.stringify(
                this.allData1[0].listDataScenePoint.find((item) => {
                  return item.name === '4#柴油库'
                })
              )
            )
            this.dianwei2Obj.chaiyou2 = this.dianwei2.listHj212[0]

            this.dianwei3 = JSON.parse(
              JSON.stringify(
                this.allData2[0].listDataScenePoint.find((item) => {
                  return item.name === '1#氨水罐'
                })
              )
            )
            this.dianwei3Obj.aqg = this.dianwei3.listHj212[0]

            this.dianwei4 = JSON.parse(
              JSON.stringify(
                this.allData3[0].listDataScenePoint.find((item) => {
                  return item.name === '2#新生物质固废车间'
                })
              )
            )
            this.dianwei4Obj.xgfcj = this.dianwei4.listHj212[0]

            // 更新数字闪一下
            this.numVisible = false
            setTimeout(() => {
              this.numVisible = true
            }, 20)
          },

          getWarnNoticeList() {
            // warnNoticeList({ cmsUserId: this.cmsUserId, departmentIds: this.departmentIds, type: 1 }).then((res) => {
            warnNoticeList({
              cmsUserId: this.cmsUserId,
              departmentIds: this.departmentIds,
              type: 1,
            }).then((res) => {
              // console.log('报警列表', res)
              if (res.data.length > 0) {
                this.maskVisible = true
                this.noticeList = res.data
              } else {
                this.maskVisible = false
                this.noticeList = []
              }
            })
          },
          // 获取报警列表
          getWarnList() {
            // alarmList({ cmsUserId: this.cmsUserId, departmentIds: this.departmentIds, typePid: '1,2', status: '1,2,3,4,7' }).then((res) => {
            alarmList({
              cmsUserId: this.cmsUserId,
              typePid: '1,2',
              status: '1,2,3,4,7',
            }).then((res) => {
              // console.log('报警列表', res)
              this.warnList = res.data
            })
          },
          // 显示当前时间（年月日时分秒）
          timeFormate(timeStamp) {
            const year = new Date(timeStamp).getFullYear()
            const month =
              new Date(timeStamp).getMonth() + 1 < 10
                ? '0' + (new Date(timeStamp).getMonth() + 1)
                : new Date(timeStamp).getMonth() + 1
            const date =
              new Date(timeStamp).getDate() < 10
                ? '0' + new Date(timeStamp).getDate()
                : new Date(timeStamp).getDate()
            const hh =
              new Date(timeStamp).getHours() < 10
                ? '0' + new Date(timeStamp).getHours()
                : new Date(timeStamp).getHours()
            const mm =
              new Date(timeStamp).getMinutes() < 10
                ? '0' + new Date(timeStamp).getMinutes()
                : new Date(timeStamp).getMinutes()
            const ss =
              new Date(timeStamp).getSeconds() < 10
                ? '0' + new Date(timeStamp).getSeconds()
                : new Date(timeStamp).getSeconds()
            this.datetime =
              year +
              '年' +
              month +
              '月' +
              date +
              '日' +
              ' ' +
              hh +
              ':' +
              mm +
              ':' +
              ss
          },
          nowTimes() {
            this.timeFormate(new Date())
            setInterval(this.nowTimes, 1000)
            this.clear()
          },
          clear() {
            clearInterval(this.nowTimes)
            this.nowTimes = null
          },

          showHistory(e) {
            if (e == 'dianwei1') {
              this.dialogData = this.dianwei1
            } else if (e == 'dianwei2') {
              this.dialogData = this.dianwei2
            } else if (e == 'dianwei3') {
              this.dialogData = this.dianwei3
            } else if (e == 'dianwei4') {
              this.dialogData = this.dianwei4
            }
            this.historyLineName = []
            this.historyLineMonth = []
            this.historyVisible = true
            this.lineVisible = false
            this.historyLineTitle =
              // this.dialogData.listHj212[0].sceneName +
              // ' ' +
              this.dialogData.listHj212[0].scenePointName

            this.dialogTitleName = e
            var startTime = moment()
              .subtract(0.6, 'hours')
              .format('YYYY-MM-DD HH:mm:ss')
            var endTime = moment().format('YYYY-MM-DD HH:mm:ss')

            sensorHistory({
              dataType: 1,
              cmsUserId: this.cmsUserId,
              sceneId: this.dialogData.listHj212[0].sceneId,
              scenePointId: this.dialogData.listHj212[0].scenePointId,
              startTime: startTime,
              endTime: endTime,
              dateType: 0,
              descDevTime: 1,
            }).then((res) => {
              this.lineVisible = true
              this.historyLineData = res.data

              for (var i = 0; i < res.data.length; i++) {
                this.historyLineName[i] = res.data[i].name
              }
              for (var j = 0; j < res.data[0].listRecordData.length; j++) {
                this.historyLineMonth[j] = res.data[0].listRecordData[j].key
              }

              this.drawHistoryLine()
            })
          },
          drawHistoryLine() {
            var chartDom = document.getElementById('historyLine')
            var myChart = echarts.init(chartDom)
            var option
            var series = []
            for (var i = 0; i < this.historyLineData.length; i++) {
              const data = []
              for (
                var j = 0;
                j < this.historyLineData[i].listRecordData.length;
                j++
              ) {
                data[j] = this.historyLineData[i].listRecordData[j].value
              }

              series[i] = {
                name: this.historyLineData[i].name,
                type: 'line',
                symbol: 'none',
                smooth: true,
                // color: 'rgba(255, 141, 26, 1)',
                itemStyle: {
                  // color: 'rgba(255, 141, 26, 1)',
                  normal: {
                    lineStyle: {
                      // 系列级个性化折线样式
                      width: 2,
                      type: 'solid',
                      // color: 'rgba(255, 141, 26, 1)'// 线条渐变色
                    },
                  },
                }, // 线条样式
                data: data,
              }
            }
            option = {
              tooltip: {
                trigger: 'axis',
              },
              legend: {
                data: this.historyLineName,
                right: '5%',
                textStyle: {
                  color: 'rgba(255, 255, 255, 0.8)',
                },
              },
              grid: {
                left: '0',
                right: '5%',
                bottom: '3%',
                containLabel: true,
              },
              dataZoom: [
                {
                  type: 'inside', //x轴
                  xAxisIndex: 0,
                  zoomOnMouseWheel: true, //如何触发缩放。可选值为：true：表示不按任何功能键，鼠标滚轮能触发缩放。false：表示鼠标滚轮不能触发缩放。'shift'：表示按住 shift 和鼠标滚轮能触发缩放。'ctrl'：表示按住 ctrl 和鼠标滚轮能触发缩放。'alt'：表示按住 alt 和鼠标滚轮能触发缩放。
                },
              ],
              xAxis: {
                type: 'category',
                boundaryGap: false,
                data: this.historyLineMonth,
                axisLine: {
                  show: true,
                  lineStyle: {
                    color: 'rgba(255, 255, 255, 0.8)',
                  },
                },
              },
              yAxis: {
                type: 'value',
                splitLine: {
                  show: true,
                  lineStyle: {
                    type: 'solid',
                    color: 'rgba(77, 91, 107, 1)',
                  },
                },
                axisLine: {
                  show: false,
                  lineStyle: {
                    color: 'rgba(255, 255, 255, 0.8)',
                  },
                },
              },
              series: series,
            }

            option && myChart.setOption(option, true)
            window.addEventListener('resize', function () {
              myChart.resize()
            })
          },
          closeBox() {
            this.active = 1
            this.historyVisible = false
            this.lineVisible = false
          },
          // 列表-滚动---只调用一次
          warnListScroll() {
            const that = this
            // 表格滚动---停止定时器
            this.stopInterval(this.warnListTimer)
            this.stopAnimate('.warnList ul')

            if (this.warnList.length > 4) {
              // 开始滚动
              this.warnListScrollAction()
              // 鼠标移入移出时的操作
              $('.warnList')
                .mouseenter(function () {
                  // 实现当鼠标移动到box上时，不执行自动轮播功能
                  console.log('warnListTimer---stop', 2)
                  that.stopInterval(that.warnListTimer)
                  that.stopAnimate('.warnList ul')
                })
                .mouseleave(function () {
                  that.warnListScrollAction()
                })

              // 鼠标上下滚动操作
              $('.warnList').on('mousewheel DOMMouseScroll', function (event) {
                var delta =
                  (event.originalEvent.wheelDelta &&
                    (event.originalEvent.wheelDelta > 0 ? 1 : -1)) ||
                  (event.originalEvent.detail &&
                    (event.originalEvent.detail > 0 ? -1 : 1))
                if (delta > 0) {
                  // 向上滚
                  $('.warnList ul li')
                    .slice(that.warnList.length - 1, that.warnList.length)
                    .prependTo($('.warnList ul'))
                  $('.warnList ul').css({ marginTop: 0 })
                } else if (delta < 0) {
                  // 向下滚
                  $('.warnList ul li').slice(0, 1).appendTo($('.warnList ul'))
                  $('.warnList ul').css({ marginTop: 0 })
                }
                event.preventDefault && event.preventDefault()
                return false
              })
            }
          },
          // 列表滚动开始
          warnListScrollAction() {
            if (this.warnList.length > 4) {
              // console.log('warnListTimer---start', 1)
              this.warnListTimer = setInterval(() => {
                $('.warnList ul').animate(
                  { marginTop: '-2.75rem' },
                  this.warnListTime,
                  'linear',
                  function () {
                    $('.warnList ul li').slice(0, 1).appendTo($('.warnList ul'))
                    $('.warnList ul').css({ marginTop: 0 })
                  }
                )
              }, this.warnListTime + 15)
            }
          },
          // 点击列表改变样式
          changeWarnLi(item, index) {
            this.warnList.map((item) => {
              item.isClick = false
            })
            item.isClick = true
          },
          changeWarnLiCancel() {
            this.warnList.map((item) => {
              item.isClick = false
            })
          },
          // 列表-滚动---只调用一次
          recordListScroll() {
            const that = this
            // 表格滚动---停止定时器
            this.stopInterval(this.recordListTimer)
            this.stopAnimate('.recordList ul')

            if (this.recordList.length > 3) {
              // 开始滚动
              this.recordListScrollAction()
              // 鼠标移入移出时的操作
              $('.recordList')
                .mouseenter(function () {
                  // 实现当鼠标移动到box上时，不执行自动轮播功能
                  that.stopInterval(that.recordListTimer)
                  that.stopAnimate('.recordList ul')
                })
                .mouseleave(function () {
                  that.recordListScrollAction()
                })

              // 鼠标上下滚动操作
              $('.recordList').on(
                'mousewheel DOMMouseScroll',
                function (event) {
                  var delta =
                    (event.originalEvent.wheelDelta &&
                      (event.originalEvent.wheelDelta > 0 ? 1 : -1)) ||
                    (event.originalEvent.detail &&
                      (event.originalEvent.detail > 0 ? -1 : 1))
                  if (delta > 0) {
                    // 向上滚
                    $('.recordList ul li')
                      .slice(that.recordList.length - 1, that.recordList.length)
                      .prependTo($('.recordList ul'))
                    $('.recordList ul').css({ marginTop: 0 })
                  } else if (delta < 0) {
                    // 向下滚
                    $('.recordList ul li')
                      .slice(0, 1)
                      .appendTo($('.recordList ul'))
                    $('.recordList ul').css({ marginTop: 0 })
                  }
                  event.preventDefault && event.preventDefault()
                  return false
                }
              )
            }
          },
          // 列表滚动开始
          recordListScrollAction() {
            if (this.recordList.length > 3) {
              // console.log('recordListTimer---start', 1)
              this.recordListTimer = setInterval(() => {
                $('.recordList ul').animate(
                  { marginTop: '-2.75rem' },
                  this.recordListTime,
                  'linear',
                  function () {
                    $('.recordList ul li')
                      .slice(0, 1)
                      .appendTo($('.recordList ul'))
                    $('.recordList ul').css({ marginTop: 0 })
                  }
                )
              }, this.recordListTime + 15)
            }
          },

          // 点击列表改变样式
          changeRecordLi(item, index) {
            this.recordList.map((item) => {
              item.isClick = false
            })
            item.isClick = true
          },
          changeRecordLiCancel() {
            this.recordList.map((item) => {
              item.isClick = false
            })
          },
          // 停止定时器
          stopInterval(interval) {
            if (interval != '') {
              clearInterval(interval)
              interval = ''
            }
          },
          stopAnimate(domName, stopAll, goToEnd) {
            if (stopAll == undefined || stopAll == null) {
              stopAll = true
            }
            if (goToEnd == undefined || goToEnd == null) {
              goToEnd = true
            }
            $(domName).stop(stopAll, goToEnd)
          },
          // 遮罩闪烁
          maskShake() {
            var timer1 = setInterval(colorLiner, 1)
            var val1 = 100
            function colorLiner() {
              var Div = document.getElementById('mask')
              if (val1 >= 0) {
                Div.style.opacity = val1 / 100
              }
              if (val1 < 0) {
                Div.style.opacity = -val1 / 100
              }
              if (val1 == -100) {
                //由-100变为正100
                val1 = -val1
              }
              val1--
            }
          },

          // 确认按钮反馈
          maskConfirm() {
            var pnos = this.noticeList.map((item) => {
              return item.icode
            })
            warnNoticeEnsure({
              operatorId: this.cmsUserId,
              pnos: pnos.toString(),
            }).then((res) => {
              if (res.code === 0) {
                // this.showTipsGreen('报警确认成功', 70, 5)
                this.maskVisible = false
              } else {
                // this.showTips(res.message, 70, 5)
                // console.log(res.message)
              }
            })
          },
          changeButton(num) {
            this.active = num
            this.historyLineName = []
            this.historyLineMonth = []
            this.lineVisible = false
            this.value1 = [new Date(), new Date()]
            if (num == 1) {
              var startTime = moment()
                .subtract(0.6, 'hours')
                .format('YYYY-MM-DD HH:mm:ss')
              var endTime = moment().format('YYYY-MM-DD HH:mm:ss')

              sensorHistory({
                dataType: 1,
                cmsUserId: this.cmsUserId,
                sceneId: this[this.dialogTitleName].sceneId,
                scenePointId: this[this.dialogTitleName].scenePointId,
                startTime: startTime,
                endTime: endTime,
                dateType: 0,
                descDevTime: 1,
              }).then((res) => {
                this.lineVisible = true
                this.historyLineData = res.data
                this.historyLineName = []
                this.historyLineMonth = []
                for (var i = 0; i < res.data.length; i++) {
                  this.historyLineName[i] = res.data[i].name
                }
                for (var j = 0; j < res.data[0].listRecordData.length; j++) {
                  this.historyLineMonth[j] = res.data[0].listRecordData[j].key
                }

                this.drawHistoryLine()
              })
            } else {
              sensorHistory({
                dataType: 1,
                cmsUserId: this.cmsUserId,
                sceneId: this[this.dialogTitleName].sceneId,
                scenePointId: this[this.dialogTitleName].scenePointId,
                startTime: this.formatDate(this.value1[0]),
                endTime: this.formatDate(this.value1[1]),
                dateType: 0,
                descDevTime: 1,
              }).then((res) => {
                this.lineVisible = true
                this.historyLineData = res.data
                this.historyLineName = []
                this.historyLineMonth = []
                for (var i = 0; i < res.data.length; i++) {
                  this.historyLineName[i] = res.data[i].name
                }
                for (var j = 0; j < res.data[0].listRecordData.length; j++) {
                  this.historyLineMonth[j] = res.data[0].listRecordData[j].key
                }

                this.drawHistoryLine()
              })
            }
          },
          chooseDate() {
            this.historyLineName = []
            this.historyLineMonth = []
            this.lineVisible = false
            sensorHistory({
              dataType: 1,
              cmsUserId: this.cmsUserId,
              sceneId: this[this.dialogTitleName].sceneId,
              scenePointId: this[this.dialogTitleName].scenePointId,
              startTime: this.value1[0],
              endTime: this.value1[1],
              dateType: 0,
              descDevTime: 1,
            }).then((res) => {
              this.lineVisible = true
              this.historyLineData = res.data
              this.historyLineName = []
              this.historyLineMonth = []
              for (var i = 0; i < res.data.length; i++) {
                this.historyLineName[i] = res.data[i].name
              }
              for (var j = 0; j < res.data[0].listRecordData.length; j++) {
                this.historyLineMonth[j] = res.data[0].listRecordData[j].key
              }

              this.drawHistoryLine()
            })
          },
          async getVideoList() {
            axios
              .get(this.commonHttp + '/api3/surveillance/point')
              .then((response) => {
                this.videoList = response.data.data
                this.getVideo(response.data.data[0].cameraIndexCode)
                this.outActiveItem = response.data.data[0].cameraIndexCode
              })
              .catch((error) => {
                console.error('Error:', error)
              })
          },

          seeOutItem(item) {
            this.outActiveItem = item.cameraIndexCode
            this.$refs.videoCarousel.setActiveItem(item.cameraIndexCode) // 通过name切换
            this.getVideo(item.cameraIndexCode)
          },
          handleCarouselChange(currentIndex, prevIndex) {
            const currentItem = this.videoList[currentIndex]
            this.outActiveItem = currentItem.cameraIndexCode // 同步高亮状态
            this.getVideo(currentItem.cameraIndexCode) // 确保切换时加载视频
          },
          showVideo() {
            this.getVideoList2()
            this.getVideo2(this.activeItem)
            this.videoDialog = true
          },
          closeHiddenTrouble() {
            this.videoDialog = false
            this.activeItem = 0
          },
          async getVideoList2() {
            axios
              .get(this.commonHttp + '/api3/surveillance/point')
              .then((response) => {
                this.videoList = response.data.data
                this.activeItem = response.data.data[0].cameraIndexCode
              })
              .catch((error) => {
                console.error('Error:', error)
              })
          },
          seeItem(item) {
            this.activeItem = item.cameraIndexCode
            this.getVideo2(item.cameraIndexCode)
          },
          //弹窗内部视频
          getVideo2(id) {
            // 先销毁旧实例
            if (this.hlsInstance) {
              this.hlsInstance.destroy()
              const videoElement = document.getElementById('videoElement3')
              // videoElement.removeEventListener('waiting', this.handleWaiting) // 移除旧监听
              this.hlsInstance = null
            }
            axios
              .get(this.commonHttp + '/api3/surveillance/previewURLs', {
                params: {
                  cameraIndexCode: id,
                },
              })
              .then((response) => {
                if (Hls.isSupported()) {
                  const videoElement = document.getElementById('videoElement3')

                  this.hlsInstance = new Hls({
                    maxBufferLength: 30, // 最大缓冲时长（秒）
                    maxMaxBufferLength: 600, // 绝对最大缓冲
                    maxBufferSize: 60 * 1000 * 1000, // 60MB内存缓冲
                    maxBufferHole: 0.5, // 允许的最大缓冲缺口
                    lowLatencyMode: false, // 关闭低延迟模式（更稳定）
                    highLatencyReduction: true, // 自动降低延迟
                  })
                  const data = response.data.data
                  // const proxyUrl = data.replace(
                  //   'https://lindro.cn/openUrl',
                  //   'http://60.188.49.67:83'
                  // )
                  // this.hlsInstance.loadSource(proxyUrl)
                  this.hlsInstance.loadSource(data)
                  this.hlsInstance.attachMedia(videoElement)
                  this.hlsInstance.on(Hls.Events.MANIFEST_PARSED, () =>
                    videoElement.play()
                  )
                  // 错误监听与自动恢复
                  this.hlsInstance.on(Hls.Events.ERROR, (event, data) => {
                    if (data.fatal) {
                      this.destroyHlsPlayer()
                      setTimeout(() => {
                        this.initHlsPlayer(videoElement, data) // 使用当前视频元素和URL
                      }, 3000)
                    }
                  })

                  this.hlsInstance.on(
                    Hls.Events.FRAG_LOAD_EMERGENCY_ABORTED,
                    () => {
                      this.hlsInstance.startLoad() // 紧急恢复加载
                    }
                  )
                } else {
                  console.error('当前浏览器不支持 flv.js')
                }
              })
              .catch((error) => {
                console.error('Error:', error)
              })
          },
          // 统一销毁逻辑
          destroyPlayer() {
            if (this.outHlsInstance) {
              this.outHlsInstance.off(Hls.Events.MANIFEST_PARSED)
              this.outHlsInstance.off(Hls.Events.ERROR)
              this.outHlsInstance.destroy()
              this.outHlsInstance = null
            }
          },
          // 统一初始化逻辑
          initPlayer(videoElement, streamUrl) {
            this.outHlsInstance = new Hls({
              maxBufferLength: 30,
              maxMaxBufferLength: 600,
              maxBufferSize: 60 * 1000 * 1000,
              maxBufferHole: 0.5,
              lowLatencyMode: false,
              highLatencyReduction: true,
            })

            this.outHlsInstance.loadSource(streamUrl)
            this.outHlsInstance.attachMedia(videoElement)

            this.outHlsInstance.on(Hls.Events.MANIFEST_PARSED, () => {
              videoElement
                .play()
                .catch((e) => console.error('自动播放失败:', e))
            })

            this.hlsInstance.on(Hls.Events.ERROR, (event, data) => {
              if (data.fatal) {
                this.destroyPlayer()
                setTimeout(() => this.initPlayer(videoElement, streamUrl), 3000)
              }
            })
          },
          // 调用方法1
          getVideo(id) {
            this.destroyPlayer()
            axios
              .get(this.commonHttp + '/api3/surveillance/previewURLs', {
                params: { cameraIndexCode: id },
              })
              .then((response) => {
                if (Hls.isSupported()) {
                  const videoElement = document.getElementById(`video-${id}`)
                  const data = response.data.data
                  console.log(data)
                  // const proxyUrl = data.replace(
                  //   'http://60.188.49.67:83',
                  //   'https://lindro.cn'
                  // )
                  this.initPlayer(videoElement, data)
                }
              })
              .catch(console.error)
          },
        },
        destroyed: function () {
          // console.log('离开页面清除定时')
          clearInterval(this.iCount)
        },
      })
    </script>
  </body>
</html>
